<template>
    <view class="main">
        <view class="item" v-for="(goodsItem,index) in goods" :key="index" @click="goDetail(goodsItem)">
            <view class="top">
                <text class="channel">{{goodsItem.channel_zh}}</text>
                <text class="time">{{goodsItem.create_time}}</text>
                <text class="status">{{goodsItem.status_zh}}</text>
            </view>
            <view class="center">
                <image class="img" :src="goodsItem.img" mode=""></image>
                <view class="content">
                    <text class="prompt"><text class="title">{{goodsItem.title}}</text></text>
                    <text class="prompt">支付金额：<text class="price">{{goodsItem.price}}</text></text>
                </view>
                <view class="clear"></view>
            </view>
            <view class="bottom">
                <text class="orderno">{{goodsItem.order_sn}}</text>
                <view class="copyBtn" @click.stop="copy(goodsItem)">
                    复制
                </view>
                <view class="clear"></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "order-item",
        props: {
            goods: {
                type: Array
            }
        },
        data() {
            return {

            }
        },
        methods: {
            goDetail: function(goodsInfo) {
                uni.navigateTo({
                    url: `./info?id=${goodsInfo.id}`
                })
            },
            copy: function(goodsInfo) {
                uni.setClipboardData({
                    showToast: false,
                    data: goodsInfo.order_sn,
                    success: function() {
                        uni.showToast({
                            title:'复制成功',
                            icon:'none',
                            duration:2000
                        })
                    }
                });
            }
        }
    }
</script>


<style lang="scss" scoped>
    .main {
        // margin-top: 20rpx;
        background-color: #ededed;
    }

    .item {
        width: 94%;
        border: 0rpx solid red;
        margin: 0 auto;
        border-radius: 10rpx;
        margin-top: 10rpx;
        padding: 10rpx;
        background-color: #fff;

        .top {
            height: 50rpx;
            padding-top: 10rpx;
            border-bottom: 1rpx solid #f4f5f7;
            margin-bottom: 20rpx;

            .channel {
                border: 0rpx solid red;
                background-color: #f36f75;
                color: #fff;
                font-size: 24rpx;
                margin-left: 10rpx;

                padding: {
                    left: 10rpx;
                    right: 10rpx;
                }

                border-radius:5rpx;
                float: left;
            }

            .time {
                font-size: 22rpx;
                margin-left: 20rpx;
                color: #b6b6b6;
                float: left;
            }

            .status {
                float: right;
                margin-right: 10rpx;
                font-size: 26rpx;
                color: #b87b5b;
            }
        }

        .center {
            border-bottom: 1rpx solid #f4f5f7;
            padding-bottom: 20rpx;

            .img {
                height: 100rpx;
                width: 100rpx;
                margin-left: 10rpx;
                float: left;
            }

            .content {
                float: left;
                width: 50%;

                margin: {
                    left: 20rpx;
                }

                ;

                .prompt {
                    display: block;
                    color: #aeaeae;
                    font-size: 22rpx;
                    margin-top: 10rpx;
                }

                .title {
                    display: block;
                    font-size: 26rpx;
                    overflow: hidden;
                    color: #000;
                    border: 0rpx solid blue;
                    height: 40rpx;
                    width: 250rpx;
                }

                .price {
                    color: #000;
                    font-weight: bold;

                    :before {
                        content: "￥";
                        color: #000;
                        font-size: 22rpx;
                    }
                }
            }

        }

        .bottom {
            .orderno {
                float: left;
                font-size: 24rpx;
                color: #a9a9a9;
                margin-left: 10rpx;

                padding: {
                    top: 20rpx;
                    bottom: 20rpx;
                }
            }

            .copyBtn {
                border: 0rpx solid red;
                height: 40rpx;
                line-height: 40rpx;
                width: 80rpx;
                float: right;
                text-align: center;

                margin: {
                    top: 20rpx;
                    right: 20rpx;
                }

                ;
                font-size: 20rpx;
                color: #000;
                background-color: #eeeeee;
                border-radius: 10rpx;
                padding: 2rpx;
            }
        }
    }
</style>